Vue.component('number-input', {
    model: {
        prop: '_value',
        event: 'change',
        _historyValue: null,
    },
    props: {
        _value: null,
        numberStrict: null,
        numberStyle: String, // price, amout, quantity, exrale
        numberUnit: String, // 单位code或id
        numberMin: Number,
        numberMax: Number,
    },
    computed: {
        text: function () {
            return Number.scaleformat(this.value, this.numberStyle, this.numberUnit);
        },
        textAlign: function () {
            var style = this.numberStyle;
            var unit = this.numberUnit;
            var config = Number.getConfig(style, unit);
            return config.align;
        },
        value: {
            get: function () {
                return Number.parse(this._value);
            },
            set: function (value) {
                this.format(value);
            }
        }
    },
    methods: {
        format: function (value) {
            if (value == "") {
                return this._value = value;
            }
            var style = this.numberStyle;
            var unit = this.numberUnit;
            if (this.numberStrict != null) {
                var number = Number.scale(value || 0, style, unit);
                if (number == null) {
                    return this._value = (this._historyValue ?? "");
                } else {
                    var min = Number.parse(this.numberMin);
                    var max = Number.parse(this.numberMax);
                    if (min != null && number < min) {
                        number = min;
                    } else if (max != null && number > max) {
                        number = max;
                    }
                    return this._value = this._historyValue = number.format(style, unit);
                }
            } else {
                var value = Number.scaleformat(value, style, unit);
                if (value != null) {
                    return this._value = value;
                }
            }
            return this._value;
        }
    },
    mounted: function () {
        if (this._historyValue == null) {
            this._historyValue = this.text;
        }
    },
    template: `
<input
  type="text"
  :style="{textAlign:textAlign}"
  :value="text"
  v-on:change="$emit('change', Number.parse(format($event.target.value)))"
  v-on:focus="$event.target.value = Number.parse($event.target.value)"
  v-on:blur="$event.target.value = format($event.target.value)"
>
`
})